<template>
	<view class="jk-page-container bg">
		<jkSearchBar
            :disabled="true"
            :search-val="searchParams.belongDate"
            :searchLeftItemName="searchParams.workshopName"
			:searchRightItemName="searchParams.groupName"
            searchRightItemNoDataName="班次"
            placeholder="日期"
            @search="onSearchBtn"
            @click-input="showSelectMonthPicker = true"
            @search-left-item="selectWorkshopPopupOptionState = true"
            @search-right-item="selectShiftPopupOptionState = true"
        ></jkSearchBar>
		<view class="column-list-container margin-top-20">
			<jk-table :height="tableHeight - 120" :table-header="tableHeader" :table-data="tableData"></jk-table>
		</view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <u-datetime-picker
            :show="showSelectMonthPicker"
            v-model="initTimeVal"
            mode="date"
            :closeOnClickOverlay="true"
            @confirm="onConfirmOfSelectMonthPicker"
            @close="showSelectMonthPicker = false"
            @cancel="showSelectMonthPicker = false"
        ></u-datetime-picker>
        <jkPopupOption
            :show="selectMachinePopupOptionState"
            :optionList="machineList"
            @visible-change="(e) => selectMachinePopupOptionState = e"
            @confirm="onConfirmOfSelectMachine"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.groupId"
            :show="selectShiftPopupOptionState"
            :optionList="shiftList"
            :show-all="false"
            @visible-change="(e) => selectShiftPopupOptionState = e"
            @confirm="onConfirmOfSelectShift"
        ></jkPopupOption>
	</view>
</template>

<script>
import {
    iotCollectDataCountPage
} from "../../../api";
    import {
        formatDate,
        isLastPage,
        pageConfig,
        showLoading
    } from "../../../utils/jk-utils";
	import jkNoMore from "../../../jk-components/jk-no-more";
	import jkTable from "../../../jk-components/jk-table";
	import jkSearchBar from "../../../jk-components/jk-search-bar";
    import jkPopupOption from "../../../jk-components/jk-popup-option";
	export default {
		components: {
            jkPopupOption,
            jkNoMore,
			jkTable,
			jkSearchBar
		},
		data() {
			return {
                selectShiftPopupOptionState: false,
                shiftList: [
                    { id: 1, name: '早班' },
                    { id: 2, name: '晚班' },
                    // { id: 1, name: '早1' },
                    // { id: 2, name: '早2' },
                    // { id: 3, name: '晚1' },
                    // { id: 4, name: '晚2' },
                ],
                machineList: [
                    { id: 'LT001', name: 'LT001' },
                    { id: 'LT002', name: 'LT002' },
                    { id: 'LT003', name: 'LT003' },
                    { id: 'LT004', name: 'LT004' },
                    { id: 'LT005', name: 'LT005' },
                    { id: 'LT006', name: 'LT006' },
                    { id: 'LT007', name: 'LT007' },
                    { id: 'LT008', name: 'LT008' },
                    { id: 'LT009', name: 'LT009' },
                ],
                selectMachinePopupOptionState: false,
                showSelectMonthPicker: false,
                initTimeVal: '',
				tableHeader: [
                    { key: 'deviceRecordNumber', title: '设备', fixed: 'left', width: '44px' },
                    { key: 'belongDateTime', title: '时间', align: 'left' },
                    { key: 'rotateSpeed', title: '速度', align: 'left' },
                    { key: 'processName', title: '工序', width: '200', align: 'left' },
                    { key: 'workshopName', title: '车间', align: 'left' },
                    { key: 'groupName', title: '班次', align: 'left' },
                    { key: 'startOutputM', title: '当班开始产量表数(米)', align: 'right' },
                    { key: 'endOutputM', title: '当班实时产量表数(米)', align: 'right' },
                    { key: 'startEnergy', title: '当班开始能耗(KW.H)表数', align: 'right' },
                    { key: 'endEnergy', title: '当班实时能耗(KW.H)表数', align: 'right' },
                    { key: 'outputM', title: '当班产量(米)', align: 'right' },
                    { key: 'outputKg', title: '当班产量(KG)', align: 'right' },
                    { key: 'energy', title: '当班能耗(KW.H)', align: 'right' },
                ],
				apiConfig: {
					list: iotCollectDataCountPage
				},
				searchParams: {
					pageNo: 1,
					pageSize: 900,
					totalCount: pageConfig.totalCount,
                    groupId: 1,
                    groupName: '早1',
					workshopId: '',
					workshopName: '',
                    processCode: '',
                    machineName: '',
                    belongDate: '',
				},
				tableData: [],
				workshopList: [],
				windowHeight: 0,
				tableHeight: 0,
                selectWorkshopPopupOptionState: false
			}
		},
		onLoad() {
            this.initTimeVal = Date.now();
            this.setDate(Date.now());
            this.workshopList = getApp().globalData.defaultWorkshop.list;
            this.getSystemInfo();
            this.getDependentData();
        },
		onShow() {
		},
		methods: {
            onConfirmOfSelectShift(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'groupId', item.id);
                this.$set(this.searchParams, 'groupName', item.name);
                this.selectShiftPopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectMachine(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'machineId', item.id);
                this.$set(this.searchParams, 'machineName', item.name);
                this.selectMachinePopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectMonthPicker(e) {
                this.setDate(e.value);
                this.showSelectMonthPicker = false;
                this.getListRequest();
            },
            setDate(val) {
                this.$set(this.searchParams, 'belongDate', formatDate(val));
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopCode', item.code);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.$set(this.searchParams, 'machineId', null);
                this.$set(this.searchParams, 'machineName', '');
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			getSystemInfo() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.windowHeight = res.windowHeight;
						_this.tableHeight = res.windowHeight - 0;
					}
				});
			},
			onSearchBtn() {
				this.getListRequest();
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
                await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
                if (this.searchParams.belongDate && this.searchParams.groupId) {
                    showLoading(true);
                    this.searchParams.pageNo = 1;
                    let params = JSON.parse(JSON.stringify(this.searchParams));
                    delete params.workshopAreaName;
                    delete params.workshopName;
                    delete params.workshopCode;
                    delete params.processName;
                    delete params.totalCount;
                    delete params.groupName;
                    delete params.machineName;
                    this.tableData = [];
                    return this.apiConfig['list'](params).then(res => {
                        showLoading(false);
                        if (res.data.status === 200) {
                            this.$set(this.searchParams, 'totalCount', res.data.count);
                            this.tableData = res.data.res;
                            this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
                        }
                    })
                } else {
                    uni.showToast({
                        title: '查询条件不能空',
                        icon: 'error'
                    });
                }
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
